<template>
  <div><!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/nav' }">组织管理</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/nav/users">用户管理</a></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索 -->
  <div class="user-content">
    <div class="item">
      <el-input v-model="input" placeholder="请输入用户名或者手机号" />
      <button class="btn" @click="onClick">搜索</button>
      <button class="btn1" @click="resetTing">重置</button>
    </div>

    <!-- 表格 -->
    <div class="list-item">
      <el-table :data="data.tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="100" />
        <el-table-column prop="name" label="昵称" width="120" />
        <el-table-column prop="account" label="手机号" width="180" />
        <el-table-column prop="roles" label="角色" width="100" />
        <el-table-column prop="gender" label="性别" width="100">
          <template #default="scoped">
            <div>{{ scoped.row.gender === 0 ? "男" : "女" }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" width="100"></el-table-column>
        <el-table-column prop="isDisabled" label="状态" width="100">
          <template #default="scoped">
            <div>{{ scoped.row.state === 0 ? "正常" : "封禁" }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scoped">
            <el-button size="small" type="primary" @click="handleOut(scoped.row)">停用</el-button>

            <el-popconfirm @confirm="handleDelete(scoped.row)" title="您确定要删除吗?">
              <template #reference>
                <el-button type="danger" size="small">删除</el-button>

              </template>
            </el-popconfirm>

            <!-- <el-button size="small" @click="handleDelete(scope.row)">删除</el-button> -->
            <el-button size="small" type="primary" @click="handleEdit(scoped.row)">编辑</el-button>
            <el-popconfirm @confirm="handlePassworld(scoped.row)" title="您确定要重置密码?">
              <template #reference>
                <el-button type="primary" size="small">重置密码</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog v-model="dialogFormVisible" title="编辑">
      <el-form :model="form" :rules="rules">
        <el-form-item label="id" :label-width="formLabelWidth" prop="id">
          <el-input v-model="form.id" placeholder="Please input" readonly />
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth" prop="address">
          <el-input v-model="form.address" />
        </el-form-item>
        <el-form-item label="余额" :label-width="formLabelWidth" prop="money">
          <el-input v-model="form.money" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="form.password" />
        </el-form-item>
        <el-form-item label="性别(0:男,1:女)" :label-width="formLabelWidth" prop="gender">
          <el-input v-model="form.gender" />
        </el-form-item>

      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submit()">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>



  </div>
</template>

<script lang='ts' setup>
<<<<<<< HEAD
import { reactive, ref, computed } from 'vue'
import { onMounted } from 'vue'
import { any } from 'vue-types';
import { userApi } from '../../apis/user.js'
=======
import { reactive, ref, onMounted, computed } from 'vue'
import { FormRules, ElMessage } from 'element-plus'
import { userApi, deleUserbyId, resetPasswordApi, reviseUserInformationApi } from '../../apis/user.js'
import { arrow } from '@popperjs/core';


const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9

interface DataType {
  account: string;//用户名
  name: string;//昵称
  phone: string;//电话号码
  roles: { name: string }[];//角色
  isDisabled: boolean;//是否禁用
}

const rules = reactive<FormRules>({
  account: { required: true, message: '请输入账号' },
  name: { required: true, message: '请输入昵称' },
  phone: { required: true, message: '请输入手机号' },
  roles: { required: true, message: '请输入角色' },
})

let form = ref({
  id: '',
  account: '',
  name: '',
  roles: '',
  address: '',
  money: '',
  password: '',
  gender: null
})


const data = reactive<{
  tableData: DataType[]
}>({
  tableData: []
})
const input = ref('')



// 进入调用数据
onMounted(() => {
  //发送接口，初始化数据
  getData()

})

// 进入调接口渲染数据
function getData() {
  userApi()
    .then((res:any) => {
      data.tableData = res.data.data
    })
}

// 停用
const handleOut = (val: any) => {
  // console.log(val);
  // getData()
}

// 编辑信息
const handleEdit = async (val: any) => {
  form.value = val
  dialogFormVisible.value = !dialogFormVisible.value
}

// 删除
const handleDelete = (val: any) => {
  deleUserbyId(val.id)
    .then((res:any) => {
      ElMessage.success("删除成功");
      getData()
    })

}

// 重置密码
const handlePassworld = (val: any) => {
  resetPasswordApi(val.id)
}


// 提交用户修改信息
function submit() {
  const datas = {
    id: form.value.id,
    account: form.value.account,
    name: form.value.name,
    // roles: form.value.roles,
    address: form.value.address,
    money: form.value.money,
    password: form.value.password,
    gender: form.value.gender
  }
  console.log(222222222222);
  console.log(datas);
  reviseUserInformationApi(datas)
  dialogFormVisible.value = !dialogFormVisible.value

}

// 搜索筛选数据
function onClick() {

  console.log(input.value);
  let newData:any = []
 const a= data.tableData.filter((item:any)=>{
    return item.name.indexOf(input.value)>-1
    
  })
  data.tableData=a

}
function resetTing() {
  getData()
}


</script>

<style lang='less' scoped>
.user-content {
  width: 100%;
  min-height: 500px;
  margin-top: 20px;
  background-color: white;
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;

  .item {
    margin-bottom: 20px;

    .btn {
      width: 80px;
      height: 40px;
      line-height: 40px;
      border: none;
      background-color: #139DFF;
      color: aliceblue;
      margin-left: 20px;
      border-radius: 4px;
    }

    .btn1 {
      width: 80px;
      height: 40px;
      line-height: 40px;
      border: none;
      margin-left: 20px;
      border-radius: 4px;
    }

  }

  .el-input {
    width: 200px;
    height: 40px;
  }
}

.m-4 {
  display: flex;

  margin-left: 100px;

  p {
    margin-right: 10px;
  }
}
</style>